<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>{{ userInfo ? userInfo.name : '' }}-学生档案</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div ref="imageTofile" class="imageTofileLine">
          <div class="archives-box" v-if="userInfo">
            <div class="infobox-left infobox-box">
              <div class="infobox-right-left-userline">
                <span></span>个人信息
              </div>
              <div class="infobox-right-left-box">
                <div class="infobox-user-left">
                  <img :src="userInfo.pic" alt="" v-if="userInfo.pic">
                  <img src="@/assets/imageAdmin/defultimg.jpg" alt="" v-else>
                </div>
                <div class="infobox-user-right">
                  <p><span>姓名：</span><span>{{ userInfo.name }}</span></p>
                  <p><span>性别：</span><span>{{ userInfo.sex }}</span></p>
                  <p><span>所属班级：</span><span>{{ userInfo.classes ? userInfo.classes.class_name : '' }}</span></p>
                  <p><span>学籍号：</span><span>{{ userInfo.student_code }}</span></p>
                  <p><span>入学时间：</span><span>{{ userInfo.enrol_time }}</span></p>
                  <!--                <p><span>联系方式：</span><span>&#45;&#45;</span></p>-->
                  <div class="infobox-user-right-botton mt-20">
                    <el-button size="small" @click="eidtStudentInfo()">编辑详情</el-button>
                    <!--              <el-button size="small" @click="bttonFn()">查看评价</el-button>-->
                  </div>
                  <span class="border-line-right"></span>
                </div>
                <div class="infobox-user-right-line">
                  <div class="infobox-user-right-list">
                    异常事项
                    <div v-if="userInfo.disease_ids">
                      <div style="margin-top: 10px;" v-if="userInfo.disease_ids.length">
                        <el-tag
                            class="tag_body"
                            v-for="item in userInfo.disease_ids" :key="item.id">
                          <el-tooltip class="item" placement="bottom" effect="light">
                            <div slot="content">
                              <p class="disease_title" style="margin-bottom: 5px;">注意事项</p>
                              <div class="disease_list" v-for="items in item.careful" :key="items.id"
                                   style="max-width: 400px;">
                                <span>【{{ items.cate.name }}】:</span>{{ items.description }}
                              </div>
                            </div>
                            <span>{{ item.name }}</span>
                          </el-tooltip>
                        </el-tag>
                      </div>
                      <div style="margin-top: 10px;" v-else>无</div>
                    </div>
                    <div v-else>无</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="infobox-right infobox-box mr-10">
              <div class="infobox-right-left-userline">
                <span></span>亲子关系
              </div>
              <div class="infobox-right-right-progress">
                <!--              icondagou 选中 -->
                <div class="relation-content">
                  <div class="relation-list" v-if="userInfo.parentage.length">
                    <div class="relation-list-box mb-10" v-for="item in userInfo.parentage" :key="item.id">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="relation-list" v-else>
                    <div class="relation-list-box mb-10">
                      <!--                      <i class="iconfont iconxuanzhongyuandian"></i>-->
                      未记录
                    </div>
                  </div>
                </div>
              </div>
              <div class="infobox-box-tip">
                <div class="box-tip">
                  <div class="oricl1"></div>
                  <div class="oricl1-line">数据来源：家长手机端一次性填报</div>
                </div>
              </div>
            </div>
            <div class="infobox-right infobox-box">
              <div class="infobox-right-left-userline">
                <span></span>领域发展
              </div>
              <div class="infobox-right-right-progress" v-if="areaTop">
                <div class="progress-list" v-for="item in areaTop" :key="item.id">
                  <span>{{ item.name }}</span>
                  <div class="progress-list-right">
                    <div class="progresswrapper">
                      <div class="pro" :style="{'width':item.areaWidth}"><em>{{ item.areaWidth }}</em></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--        //全面发展矩阵图-->
          <div class="infobox-box">
            <div class="infobox-right-left-userline">
              <span></span>全面发展矩阵图
            </div>
            <div class="echartsBox">
              <div class="progress-list-tips">
                <div class="progress-list-tips-list" v-for="(item,index) in mapData">
                  <span></span>{{ item.name }}-幅度{{ item.score }}，当前 {{ item.number }}
                </div>
              </div>
              <div class="echartsBox-left">
                <div id="echarts" class="home_top_echarts"></div>
              </div>
            </div>
            <div class="infobox-box-tip">
              <div class="box-tip">
                <div class="oricl1"></div>
                <div class="oricl1-line">数据来源：教师日常评价工作台（Pad，手机，PC）</div>
              </div>
            </div>
          </div>
          <!--        //健康发育曲线图-->
          <div class="infobox-box">
            <div class="infobox-right-left-userline">
              <span></span>健康发育曲线图
            </div>
            <div class="echartsBox">
              <!--              <div class="echartsBox-info-content">-->
              <!--                <p class="study-list-title">年龄：0</p>-->
              <!--                <p class="study-list-title mb-10">总人数：0人</p>-->
              <!--                <div class="study-list mb-10">-->
              <!--                  <p>身高：0cm（中位数）</p>-->
              <!--                  <div class="study-list-line">-->
              <!--                    <span><em>+3SD</em>0人(0%)</span>-->
              <!--                    <span><em>+2SD</em>0人(0%)</span>-->
              <!--                    <span><em>+1SD</em>0人(0%)</span>-->
              <!--                    <span><em>中位数</em>0人(0%)</span>-->
              <!--                    <span><em>-1SD</em>0人(0%)</span>-->
              <!--                    <span><em>-2SD</em>0人(0%)</span>-->
              <!--                    <span><em>-3SD</em>0人(0%)</span>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--                <div class="study-list">-->
              <!--                  <p>体重：0kg（中位数）</p>-->
              <!--                  <div class="study-list-line">-->
              <!--                    <span><em>+3SD</em>0人(0%)</span>-->
              <!--                    <span><em>+2SD</em>0人(0%)</span>-->
              <!--                    <span><em>+1SD</em>0人(0%)</span>-->
              <!--                    <span><em>中位数</em>0人(0%)</span>-->
              <!--                    <span><em>-1SD</em>0人(0%)</span>-->
              <!--                    <span><em>-2SD</em>0人(0%)</span>-->
              <!--                    <span><em>-3SD</em>0人(0%)</span>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <div class="echartsBox-left">
                <div id="development_Line" class="home_top_Development" ref="development_Line"></div>
              </div>
            </div>
            <div class="infobox-box-tip">
              <div class="box-tip">
                <div class="oricl1"></div>
                <div class="oricl1-line">数据来源：全自动AI发育评价仪</div>
              </div>
            </div>
          </div>
          <!--        //个性发展九型表-->
          <div class="infobox-box" v-show="false">
            <div class="infobox-right-left-userline">
              <span></span>个性发展九型表
            </div>
            <div class="echartsBox">
              <div class="character-line-list">
                <div class="character-line-list-title teacher-color">教师评估</div>
                <div class="character-box">
                  <div v-for="(item,index) in characterList" :key="index" class="character-box-list">
                    <el-tooltip class="item" :content="item.desc" placement="top" effect="light">
                      <div class="character-tooltip">
                        <div class="character-box-type" :class="item.type==1||item.type==2?'activeTeacher':''">
                          {{ item.type == 1 ? '主型' : (item.type == 2 ? '副型' : '') }}
                        </div>
                        <div class="character-box-name">{{ item.name }}</div>
                        <div class="character-box-desc">{{ item.title }}</div>
                        <div class="character-box-number">{{ item.number }}</div>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="echartsBox-left">
                <div id="echartsDevelopment" class="home_top_Development" ref="echartsDevelopment"></div>
              </div>
              <div class="character-line-list">
                <div class="character-line-list-title parents-color">家长评估</div>
                <div class="character-box">
                  <div v-for="(item,index) in characterList" :key="index" class="character-box-list">
                    <el-tooltip class="item" :content="item.desc" placement="top" effect="light">
                      <div class="character-tooltip">
                        <div class="character-box-type" :class="item.type==1||item.type==2?'activeParents':''">
                          {{ item.type == 1 ? '主型' : (item.type == 2 ? '副型' : '') }}
                        </div>
                        <div class="character-box-name">{{ item.name }}</div>
                        <div class="character-box-desc">{{ item.title }}</div>
                        <div class="character-box-number">{{ item.number }}</div>
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            <div class="infobox-box-tip">
              <div class="box-tip">
                <div class="oricl1"></div>
                <div class="oricl1-line">数据来源：入园，毕业两次评估（家长和老师）</div>
              </div>
            </div>
          </div>
          <!--        //个性发展九型表-->
          <div class="infobox-box">
            <div class="infobox-right-left-userline">
              <span></span>动作发展评测
            </div>
            <div class="echartsBox">
              <el-table
                  :data="tableData"
                  style="width: 100%">
                <el-table-column
                    label="测评项">
                  <template slot-scope="scope">
                    {{ scope.row.parentsName }}-{{ scope.row.name }}
                  </template>
                </el-table-column>
                <el-table-column
                    label="年段均值">
                  <template slot-scope="scope">
                    {{ scope.row.avg }}{{ scope.row.type == 1 ? '秒' : '次' }}
                  </template>
                </el-table-column>
                <el-table-column
                    label="数值">
                  <template slot-scope="scope">
                    <span v-if="JSON.stringify(scope.row.log)!=='[]'">{{
                        scope.row.log.score
                      }}{{ scope.row.type == 1 ? '秒' : '次' }}</span>
                    <span v-else>未评测</span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="分析">
                  <template slot-scope="scope">
                    <el-link :type="scope.row.valStatus">{{scope.row.valNumber}}{{ scope.row.valNumber!=='中位数'?(scope.row.type == 1 ? '秒' : '次'):'' }}</el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="infobox-box-tip">
              <div class="box-tip">
                <div class="oricl1"></div>
                <div class="oricl1-line">数据来源：教师日常评价工作台（Pad，手机，PC）</div>
              </div>
            </div>
          </div>
          <!--        //健康发育曲线图-->
          <div class="infobox-box">
            <div class="infobox-right-left-userline">
              <span></span>学习品质
            </div>
            <div class="echartsBox">
              <!--              <div class="echartsBox-info-content">-->
              <!--                <p class="study-list-title">年龄：0</p>-->
              <!--                <p class="study-list-title mb-10">总人数：0人</p>-->
              <!--                <div class="study-list mb-10">-->
              <!--                  <p>专注力平均值：0</p>-->
              <!--                  <div class="study-list-line">-->
              <!--                    <span><em>+3</em>0人(0%)</span>-->
              <!--                    <span><em>+2</em>0人(0%)</span>-->
              <!--                    <span><em>+1</em>0人(0%)</span>-->
              <!--                    <span><em>均值</em>0人(0%)</span>-->
              <!--                    <span><em>-1</em>0人(0%)</span>-->
              <!--                    <span><em>-2</em>0人(0%)</span>-->
              <!--                    <span><em>-3</em>0人(0%)</span>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--                <div class="study-list">-->
              <!--                  <p>好奇心平均值：0</p>-->
              <!--                  <div class="study-list-line">-->
              <!--                    <span><em>+3</em>0人(0%)</span>-->
              <!--                    <span><em>+2</em>0人(0%)</span>-->
              <!--                    <span><em>+1</em>0人(0%)</span>-->
              <!--                    <span><em>均值</em>0人(0%)</span>-->
              <!--                    <span><em>-1</em>0人(0%)</span>-->
              <!--                    <span><em>-2</em>0人(0%)</span>-->
              <!--                    <span><em>-3</em>0人(0%)</span>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
              <div class="echartsBox-left">
                <div id="development_Study" class="home_top_Development" ref="development_Study"></div>
              </div>
            </div>
            <div class="infobox-box-tip">
              <div class="box-tip">
                <div class="oricl1"></div>
                <div class="oricl1-line">数据来源：家长月打卡教师日常观察记录</div>
              </div>
            </div>
          </div>
        </div>

        <studentEdit :visible.sync="detailVisible" :studentId="studentId" @initFn="editInitFn"></studentEdit>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">确定</el-button>
        <el-button @click="toImage" size="small">截取当前页面信息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts')
import studentEdit from '@/views/admin/Campus/studentDetail'
import html2canvas from 'html2canvas'
import {studyQuality, studyGrowth} from '@/api/admin/student'
import {assessDetailAll} from '@/api/admin/evaluating'

export default {
  props: ['visible', 'studentId'], // commoent 学生点评 collection 学生采集
  components: {
    studentEdit
  },
  data() {
    return {
      dialogVisible: false,
      detailVisible: false,
      echartsLine: [],
      width: ['0%', '0%', '0%', '0%', '0%'],
      userInfo: null,
      areaTop: null, // 五大领域
      mapData: [], // 领域细分
      echartsData: [], // 图形数据
      characterList: [
        {name: '1号', number: 0, type: 0, title: '完美主义者', desc: '九型人格类型描述'},
        {name: '2号', number: 0, type: 0, title: '给予者', desc: '九型人格类型描述'},
        {name: '3号', number: 0, type: 1, title: '实干者', desc: '九型人格类型描述'},
        {name: '4号', number: 0, type: 0, title: '悲情浪漫者', desc: '九型人格类型描述'},
        {name: '5号', number: 0, type: 0, title: '观察者', desc: '九型人格类型描述'},
        {name: '6号', number: 0, type: 2, title: '怀疑论者', desc: '九型人格类型描述'},
        {name: '7号', number: 0, type: 0, title: '享乐主义者', desc: '九型人格类型描述'},
        {name: '8号', number: 0, type: 0, title: '保护者', desc: '九型人格类型描述'},
        {name: '9号', number: 0, type: 0, title: '调停者', desc: '九型人格类型描述'}
      ],
      tableData: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        if (this.studentId) {
          this.InitFn()
          this.studentPointFn()
          this.getDevelopment();
          this.getPinZhiFn();
          this.getStudentAssess();
        }
      }
    }
  },
  created() {
  },
  methods: {
    // 动作评测
    getStudentAssess() {
      assessDetailAll({student_id: this.studentId}).then(res => {
        let list = []
        for (let item of res.list) {
          if (item.list.length) {
            for (let item_child of item.list) {
              item_child.parentsName = item.name
              let avg_ = parseFloat(item_child.avg) // 平均值
              let num_ = parseFloat(item_child.log.score) // 获得值
              if (avg_ > num_) {
                let saveTwoPosVal = (avg_ - num_)+''
                item_child.valStatus = 'danger' 
                // 保留两位小数
                item_child.valNumber = '-偏离'+saveTwoPosVal.substring(0, saveTwoPosVal.indexOf(".") + 3)
              } else if (avg_ < num_) {
                let saveTwoPosValSucess = (num_ - avg_)+''
                item_child.valStatus = 'success'
                // 保留两位小数
                item_child.valNumber = '+偏离'+saveTwoPosValSucess.substring(0, saveTwoPosValSucess.indexOf(".") + 3)
              } else if (avg_ === num_) {
                item_child.valStatus = 'success'
                item_child.valNumber = '中位数'
              }
              list.push(item_child)
              console.log(avg_, num_)
            }
          }
        }
        this.tableData = this.getJson(list)
        console.log(this.tableData,'表格打印------------------403')
      })
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    async InitFn() {
      let data = await this.$fetch(this.api.admin_student_edit, {
        id: this.studentId
      })
      if (!data.code) {
        this.userInfo = data.vo
      } else {
        this.$message.error(data.msg)
      }
    },
    async studentPointFn() {
      console.log('计算五大领域百分比')
      let data = await this.$fetch(this.api.student.studentPoint, {
        student_id: this.studentId
      })
      this.mapData = data.detail
      let echartIndicator = []
      let seriesData = []
      let list_ = {}
      for (let i in data.detail) {
        if (!list_[data.detail[i].parents.id]) {
          list_[data.detail[i].parents.id] = data.detail[i].parents
          list_[data.detail[i].parents.id].list = []
        }
        list_[data.detail[i].parents.id].list.push(data.detail[i])
        echartIndicator.push({text: data.detail[i].name, max: data.detail[i].score})
        seriesData.push(data.detail[i].number)
      }
      // 计算五大领域百分比
      for (let j in list_) {
        let areaScore = 0 // 领域总分值相加
        let areaNumber = 0 // 领域总得分值相加
        for (let n in list_[j].list) {
          areaScore = areaScore + parseFloat(list_[j].list[n].score)
          areaNumber = areaNumber + parseFloat(list_[j].list[n].number)
        }
        list_[j].areaScore = areaScore
        list_[j].areaNumber = areaNumber
        list_[j].areaWidth = areaNumber ? ((areaNumber / areaScore) * 100).toFixed(2) + '%' : '0%'
      }
      console.log('收到的数据内容123', echartIndicator, seriesData)
      this.areaTop = list_
      this.echartsthree(echartIndicator, seriesData)
    },
    echartsthree(echartIndicator, seriesData) {
      this.$nextTick(function () {
        let myChart = echarts.init(document.getElementById('echarts'))
        let option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          // legend: {
          //   left: 'center',
          //   data: ['全面发展矩阵图']
          // },
          radar: [
            {
              indicator: echartIndicator,
              center: ['50%', '50%'],
              radius: 160,
              name: {
                formatter: '【{value}】',
                textStyle: {
                  color: '#000'
                }
              },
            }
          ],
          series: [
            {
              type: 'radar',
              radarIndex: 0,
              areaStyle: {},
              data: [
                {
                  name: '全面发展矩阵图',
                  value: seriesData,
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value
                    }
                  },
                  itemStyle: {
                    opacity: 0.8, // 图表中各个图区域的透明度
                    color: '#01a439' // 图表中各个图区域的颜色
                  }
                }
              ]
            }
          ]
        }
        myChart.setOption(option)
      })
    },
    bttonFn() {
      this.$confirm('尚未开启！', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
      }).catch(() => {
      })
    },
    editInitFn() {
      this.$emit('InitFn')
      this.InitFn()
    },
    async getChildValue(option) {
      console.log('获取到的内容信息：', option)
      if (option) {
        let {data} = await this.$post(this.api.student.picEdit, {id: this.editId, pic: option})
        if (!data.code) {
          this.userInfo.pic = option
          console.log(data)
        }
      }
    },
    eidtStudentInfo() {
      this.detailVisible = !this.detailVisible
    },
    // 获取品质
    getPinZhiFn() {
      studyQuality({student_id: this.studentId}).then(res => {
        console.log('学生品质：', res)
        this.pinzhiEchart(res.list)
      })
      // 健康发育曲线图
      studyGrowth({student_id: this.studentId}).then(res => {
        console.log('学生健康曲线：', res)
        this.studyGrowthEcharts(res.list)
      })
    },
    pinzhiEchart(res) {
      let bar_dv_Study = this.$refs.development_Study;
      let myChart_Study = echarts.init(bar_dv_Study)
      let emphasisStyle = {
        itemStyle: {
          barBorderWidth: 1,
          shadowBlur: 8,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0,0,0,0.5)'
        },
        focus: 'series'
      };
      let newOptionData = []
      // 数据重组 quality
      // name: "专注力"
      // parent_score: 0
      // user_score: 0
      let x_line = [] // x轴名称
      let legend = [] // 颜色区块
      let data_line = []
      for (let index in res) {
        let item_ = res[index]
        x_line.push(`${item_.name}${item_.type ? '下学期' : '上学期'}`)
        for (let index_ in item_.quality) {
          let item_in = item_.quality[index_]
          console.log('item_in:', item_in, index)
          if (!Number(index)) {
            legend.push(`${item_in.name}老师评`);
            legend.push(`${item_in.name}家长评`);
            newOptionData.push({
              name: `${item_in.name}老师评`,
              type: 'bar',
              stack: 'one' + index_,
              emphasis: emphasisStyle,
              barMaxWidth: '20',
              itemStyle: {
                normal: {
                  label: {
                    show: true,  //开启显示
                    position: 'top',  //在上方显示
                    textStyle: {  //数值样式
                      color: 'black',
                      fontSize: 12
                    },
                  }
                }
              },
              data: [item_in.user_score]
            })
            newOptionData.push({
              name: `${item_in.name}家长评`,
              type: 'bar',
              stack: 'one' + index_,
              emphasis: emphasisStyle,
              barMaxWidth: '20',
              itemStyle: {
                normal: {
                  label: {
                    show: true,  //开启显示
                    position: 'top',  //在上方显示
                    textStyle: {  //数值样式
                      color: 'black',
                      fontSize: 12
                    },
                    formatter: `${item_in.name}`,
                  }
                }
              },
              data: [item_in.parent_score]
            })
          } else {
            console.log('item_in:', newOptionData, index_ * 2)
            newOptionData[index_ * 2].data.push(item_in.user_score)
            newOptionData[index_ * 2 + 1].data.push(item_in.parent_score)
          }
        }
      }
      console.log('newOptionData:', newOptionData)
      // end

      let option_Study = {
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          x: 'center',
          y: 'top',
          show: true,
          data: legend,
        },
        xAxis: {
          data: x_line,
          name: '学年',
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          name: '幅度',
          // splitArea: {show: false},
          min: 0,
        },
        grid: {
          left: 50,
          containLabel: true
        },
        series: newOptionData
      };
      myChart_Study.setOption(option_Study)
    },
    studyGrowthEcharts(optionData) {
      console.log('发展曲线图', optionData)
      let that = this
      var bar_dv_line = that.$refs.development_Line;
      let myChart_line = echarts.init(bar_dv_line);
      let name_data = []
      let height_data = []
      let weight_data = []
      for (let item of optionData) {
        name_data.push(item.year)
        height_data.push(item.height)
        weight_data.push(item.weight)
      }
      let option_line = {
        xAxis: {
          type: 'category',
          // data: ['1周', '2周', '3周', '4周', '5周', '6周', '7周'],
          data: name_data,
          axisPointer: {
            type: 'shadow'
          }
        },
        tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: { // 坐标轴虚线
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
        },
        legend: {
          data: ['体重(kg)', '身高(cm)']
        },
        yAxis: [{
          name: '体重(kg)',
          type: 'value',
          interval: 10, // 强制设置坐标轴分割间隔
          max: 100,
          min: 0,
          axisLabel: {
            formatter: '{value} kg'
          },
          axisLine: {
            lineStyle: {
              color: '#333'
            }
          },
        },
          {
            name: '身高(cm)',
            // nameLocation: 'end',
            max: 150, //坐标轴刻度最大值
            min: 0,
            type: 'value',
            interval: 15,
            axisLabel: {
              formatter: '{value} cm'
            },
            // inverse: true,
            axisLine: {
              // show: false,
              lineStyle: {
                color: '#333'
              }
            },
            // boundaryGap: [0, '100%'],
            scale: 'h'
          }],
        series: [{
          // data: [10, 20, 30, 40, 60, 10, 40],
          data: weight_data,
          type: 'line',
          name: '体重(kg)',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              return value + ' kg';
            }
          },
        },
          {
            // data: [20, 10, 30, 40, 90, 10, 140],
            data: height_data,
            type: 'line',
            name: '身高(cm)',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' cm';
              }
            },
          }]
      };
      myChart_line.setOption(option_line)
    },
    getDevelopment() {
      let that = this;
      this.$nextTick(function () {
        var bar_dv = that.$refs.echartsDevelopment;
        let myChart = echarts.init(bar_dv)
        let option = {
          title: {
            text: ''
          },
          legend: {
            data: ['教师采集', '家长采集']
          },
          radar: [
            {
              indicator: [
                {text: '1号'},
                {text: '2号'},
                {text: '3号'},
                {text: '4号'},
                {text: '5号'},
                {text: '6号'},
                {text: '7号'},
                {text: '8号'},
                {text: '9号'}
              ],
              center: ['50%', '55%'],
              radius: 130,
              startAngle: 90,
              splitNumber: 4,
              shape: 'circle',
              name: {
                formatter: '【{value}】',
                textStyle: {
                  color: '#333'
                }
              },
              splitArea: {
                areaStyle: {
                  color: ['rgba(114, 172, 209, 0.2)',
                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                  shadowColor: 'rgba(0, 0, 0, 0.3)',
                  shadowBlur: 10
                }
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.5)'
                }
              }
            }
          ],
          series: [
            {
              name: '雷达图',
              type: 'radar',
              emphasis: {
                lineStyle: {
                  width: 4
                }
              },
              data: [
                {
                  value: [23, 8, 55, 66, 33, 78, 21, 23, 55],
                  name: '教师采集',
                  symbol: 'rect',
                  symbolSize: 5,
                  lineStyle: {
                    type: 'dashed'
                  }
                },
                {
                  value: [11, 22, 45, 77, 55, 33, 23, 45, 21],
                  name: '家长采集',
                  areaStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                  }
                }
              ]
            }
          ]
        }
        myChart.setOption(option)


      })
    },
    toImage() {
      // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
      let that = this;
      html2canvas(this.$refs.imageTofile, {
        backgroundColor: '#fff', // 背景色
        useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then(canvas => {
        let url = canvas.toDataURL("image/png");
        that.getBase64(url)
      });
    },
    getBase64(content) {
      //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
      let aLink = document.createElement('a');
      let blob = this.base64ToBlob(content); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      console.log("点击下载", evt)
      evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = this.userInfo.name + '-学生档案.jpg';
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
      aLink.click()
    },
    base64ToBlob(code) {
      let parts = code.split(';base64,');
      let contentType = parts[0].split(':')[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {type: contentType});
    }
  },
  mounted() {

  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 75%;
  height: 98%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  /*padding: 10px;*/
  flex: 1;
  overflow-y: auto;
  /*background: #70d4ff;*/
}

.close-Btn-line {
  cursor: pointer;
}


.tag_body {
  cursor: pointer;
}

.archives-box {
  display: flex;
}

.infobox-box {
  /*box-shadow: 0 0 10px #eee;*/
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
}

.infobox-left {
  flex: 1;
  margin-right: 10px;
}

.infobox-right {
  width: 420px;
}

.infobox-user-left img {
  width: 100px;
  height: auto;
  box-shadow: 0 4px 8px #ddd;
}

.infobox-right-left-box {
  display: flex;

}

.infobox-user-right {
  flex: 1;
  padding-left: 20px;
  position: relative;
}

.border-line-right {
  position: absolute;
  top: 20px;
  right: 0px;
  display: block;
  width: 1px;
  height: 150px;
  background: #eee;
}

.infobox-user-right-line {
  flex: 1;
  padding-left: 15px;
}

.progress-list {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.progress-list span {
  display: block;
  width: 53px;
  padding-right: 20px;
  text-align: right;
  color: #777;
}

.progress-list:last-child {
  margin-bottom: 0;
}

.progress-list-right {
  flex: 1;
  padding-right: 38px;
}

.infobox-right-left-userline {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  /*font-weight: bold;*/
  font-size: 16px;
}

.infobox-right-left-userline span {
  display: block;
  width: 5px;
  height: 15px;
  border-radius: 2px;
  background: #1b8de5;
  margin-right: 10px;
}

.infobox-user-right p {
  margin-bottom: 6px;
  color: #444;
}

.progress-list-tips-list {
  font-size: 12px;
  display: flex;
  color: #0066b5;
  align-items: center;
  margin-bottom: 10px;
}

.progress-list-tips-list span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #0066b5;
  margin-right: 5px;
}

/*background-image : linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)*/
.progresswrapper {
  width: 100%;
  height: 8px;
  position: relative;
  border-radius: 7px;
  background: #f8f8f8;
}

.pro {
  width: 90%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-color: #409EFF;
  background-size: 40px 40px;
  animation: progressbar 2s linear infinite;
  border-radius: 7px;
  text-align: right;
  color: #fff;
  font-size: 12px;
  position: relative;
}

.progresswrapper em {
  font-style: normal;
  position: absolute;
  right: -42px;
  color: #333;
  line-height: 8px;
}

@keyframes progressbar {
  0% {
    background-position: 40px 0
  }
  100% {
    background-position: 0 0
  }
}

#echarts {
  height: 400px;
  width: 100%;
}

.echartsBox {
  display: flex;
  padding: 0 15px;
}

.echartsBox .progress-list-tips {
  width: 210px;
}

.echartsBox .progress-list-tips .progress-list-tips-list {
  font-size: 14px;
}

.echartsBox-left {
  flex: 1;
  height: 500px;
}

.home_top_Development {
  height: 100%;
  width: 100%;
}

.echartsBox-info-content {
  width: 170px;
  font-size: 14px;
  padding-left: 20px;
  padding-bottom: 30px;
  color: #444;
}

.study-list-title {

}

.study-list {

}

.study-list-line {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

.study-list-line span {
  display: flex;
  align-items: center;
}

.study-list-line span em {
  font-style: normal;
  margin-right: 10px;
  display: block;
  width: 44px;
  text-align: right;
}

.teacher-color {
  background: #969ec8;
}

.parents-color {
  background: #e28fad;
}

.activeTeacher {
  background: #969ec8;
  color: #fff;
  font-size: 10px;
  display: flex;
  padding: 4px 0;
  align-items: center;
  justify-content: center;
}

.activeParents {
  background: #e28fad;
  color: #fff;
  font-size: 10px;
  display: flex;
  padding: 4px 0;
  align-items: center;
  justify-content: center;
}

.character-line-list {
  width: 200px;
  color: #444;
  padding-bottom: 40px;
}

.character-line-list-title {
  height: 40px;
  padding-left: 40px;
  display: flex;
  align-items: center;
  color: #fff;
  margin-bottom: 5px;
}

.character-tooltip {
  display: flex;
  align-items: center;
  padding: 5px 0;
  cursor: pointer;
}

.character-box-type {
  width: 30px;
}

.character-box-name {
  margin: 0 10px;
}

.character-box-desc {
  width: 100px;
}

.relation-content {
  display: flex;
  color: #999;
}

.relation-content .iconfont {
  margin-right: 0;
}

.relation-list {
  flex: 1;
}

.relation-list-box {

}

.imageTofileLine {
  background: #fff;
  padding: 10px;
}

.box-tip {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}

.oricl1 {
  border-top: 30px solid #0aa0ff;
  border-left: 30px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  margin-right: -50px;
}

.oricl1-line {
  height: 30px;
  line-height: 30px;
  background: #0aa0ff;
  color: #fff;
  padding: 0 10px;
}
</style>
